<template>
  <a-tree-select
        v-model="value"
        style="width: 200px"
        @change="areaSelect"
        show-search
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="Please select"
        tree-default-expand-all
      >
        <a-tree-select-node
          v-for="item in departmentList"
          :key="item.id"
          :value="item.id"
          :cont="item"
          :title="item.areaname"
        >
          <a-tree-select-node
            :key="citem.id"
            :title="citem.areaname"
            :value="citem.id"
            :cont="citem"
            v-for="citem in item.children"
          >
            <a-tree-select-node
              :key="ccitem.id"
              :title="ccitem.areaname"
              :value="ccitem.id"
              :cont="ccitem"
              v-for="ccitem in citem.children"
            >
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select-node>
      </a-tree-select>
</template>

<script>
import { getAreaList } from "@/api/perUnit";
export default {
    
    name:'SelectTreeArea',
    data(){
        return {
            departmentList: [],
            value:'hahah'
        }
    },
    created(){
        getAreaList()
      .then((res) => {
        this.departmentList = res.data;
        this.value = res.data[0].areaname
      })
      .catch((err) => {
        console.log(err);
      });
    },
    methods:{
        areaSelect(value, key, extra){
            this.$emit('checkData',extra.triggerNode.$attrs.cont)
        }
            },
}
</script>

<style>

</style>